<!-- src/components/Calendar/CalendarToolbar.vue -->
<template>
  <aside class="right-toolbar">
    <div class="toolbar-icons">
      <el-button class="toolbar-btn" @click="$emit('show-picture-reader')" :icon="Picture" />
      <el-button class="toolbar-btn" @click="$emit('show-tasks-list')" :icon="Check" />
      <el-button class="toolbar-btn" @click="$emit('show-contacts')" :icon="User" />
      <el-button class="toolbar-btn" @click="$emit('show-maps')" :icon="Location" />
      <el-button class="toolbar-btn" @click="$emit('add-more')" :icon="Plus" />
    </div>
  </aside>
</template>

<script lang="ts" setup>
import { Picture, Check, User, Location, Plus } from '@element-plus/icons-vue'

const emit = defineEmits([
  'show-picture-reader',
  'show-tasks-list',
  'show-contacts',
  'show-maps',
  'add-more'
])
</script>

<style scoped>
.right-toolbar {
  width: 60px;
  background: #f8f9fa;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0;
}

.toolbar-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.toolbar-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 8px;
  color: #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background: #e3f2fd;
  color: #1976d2;
}

@media (max-width: 768px) {
  .right-toolbar {
    width: 50px;
  }
}
</style>